<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人资料--Tina</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <script type="text/javascript" src="/static/view/js/jquery.min.js"></script>

    <link rel="stylesheet" href="/static/res/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/res/hint/css/message.css">
    <link rel="stylesheet" href="../../css/user.css" media="all"/>

    <script src="../../../res/edit-img/head/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../res/edit-img/css/bootstrap.min.css">
    <link href="../../../res/edit-img/head/cropper.min.css" rel="stylesheet">
    <link href="../../../res/edit-img/head/sitelogo.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../../res/edit-img/css/font-awesome.min.css">
    <script src="../../../res/edit-img/head/bootstrap.min.js"></script>
    <script src="../../../res/edit-img/head/cropper.js"></script>
    <script src="../../../res/edit-img/head/sitelogo.js"></script>

    <style type="text/css">
        .avatar-btns button {
            height: 35px;
        }

        .layui-form-label {
            width: 90px;
        }
    </style>

</head>
<body class="childrenBody">

<div class="user_left">
    <form class="layui-form">
        <input type="text" value="" name="userId" class="layui-input layui-hide userId">
        <div class="layui-form-item">
            <label class="layui-form-label  is-required">登录名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input userName" lay-verify="userName" name="userName"
                       placeholder="请输入登录名" maxlength="10"
                       autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  is-required">昵称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input userNickname" name="userNickname" placeholder="请输入昵称"
                       maxlength="10" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  is-required">邮箱</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input userEmail" name="userEmail" placeholder="请输入邮箱"
                       maxlength="30"
                       autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item" pane="">
            <label class="layui-form-label  is-required">性别</label>
            <div class="layui-input-block userSex">
                <input type="radio" name="userSex" value="1" title="男" checked>
                <input type="radio" name="userSex" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  is-required">号码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input userTelephoneNumber" name="userTelephoneNumber"
                       placeholder="请输入手机号码" maxlength="11" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  is-required">生日</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input userBirthday" name="userBirthday" id="userBirthday"
                       placeholder="请输入生日"
                       autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label  is-required">角色</label>
            <div class="layui-input-block">
                <select name="roleId" id="role">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="editUserInfo">立即提交</button>
            </div>
        </div>

    </form>

</div>

<div class="user_right">
    <center>
        <button type="button" class="layui-btn layui-btn-primary" data-toggle="modal" data-target="#avatar-modal"
                style="margin: 10px;">修改头像
        </button>
    </center>

    <div class="user_pic" style="margin: 10px;">
        <img src="">
    </div>

    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
         tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
                <form class="avatar-form">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                <button class="layui-btn" type="button" style="height: 35px;background-color:#33cabb;"
                                        onClick="$('input[id=avatarInput]').click();">请选择图片
                                </button>
                                <span id="avatar-name"></span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg" id="imageHead"></div>
                                    <!--<div class="avatar-preview preview-md"></div>
                            <div class="avatar-preview preview-sm"></div>-->
                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <button class="layui-btn layui-btn-primary fa fa-undo" data-method="rotate"
                                                data-option="-90"
                                                type="button" title="Rotate -90 degrees"> 向左旋转
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="layui-btn layui-btn-primary fa fa-repeat" data-method="rotate"
                                                data-option="90"
                                                type="button" title="Rotate 90 degrees"> 向右旋转
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-5" style="text-align: right;">
                                    <button class="layui-btn layui-btn-primary fa fa-arrows" data-method="setDragMode"
                                            data-option="move"
                                            type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary fa fa-search-plus"
                                            data-method="zoom"
                                            data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								  <!--<span class="fa fa-search-plus"></span>-->
								</span>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary fa fa-search-minus"
                                            data-method="zoom"
                                            data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title=""
                                      data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								  <!--<span class="fa fa-search-minus"></span>-->
								</span>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary fa fa-refresh"
                                            data-method="reset"
                                            title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title=""
                                          data-original-title="$().cropper(&quot;reset&quot;)"
                                          aria-describedby="tooltip866214">
                                    </span>
                                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button class="layui-btn btn-block avatar-save fa fa-save" type="button"
                                            data-dismiss="modal"> 保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</div>

<script type="text/javascript" src="/static/res/hint/js/message.js"></script>
<script type="text/javascript" src="/static/res/layui/layui.js"></script>
<script src="../../../res/edit-img/head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/user.js"></script>


</body>
</html>
